/* --------------------------- 定义变量与引入插件 -------------------------- */
let main = document.querySelector("main");
let datas = {
  imgDOM_src: "./picture/标题图片.jpg",
  h2sDOM_text: "~!!!",
  p1DOM_text: "这个描述内容很重要，。。。。。",
  spansDOM_Thumb_up: "10",
  spansDOM_browse: "0",
  spansDOM_speak: "0",
  spansDOM_categories: "默认类别",  
  namev: "",
  article_text: "整个文章内容",
}
// const URL = "http://localhost:3000/dataFunctionKey";
// const URL = "http://xuejiang.free.idcfengye.com/dataFunctionKey";
const URL = "	http://xuesang.vipgz1.91tunnel.com/dataFunctionKey";

// const URLs = "http://localhost:3000/articlesDataSum";
// const URLs = "http://xuejiang.free.idcfengye.com/articlesDataSum";
const URLs = "	http://xuesang.vipgz1.91tunnel.com/articlesDataSum";
let serialNumber = [];
let n = 0;


// 引入插件 (轮播图)
import { slideshow } from "../../../resources/slideshow/slideshow.js";

// 引入插件 (ajax)
import { funt } from "./ajax.js"

// 引入headSet插件
import { headRolling } from "./headSet.js"
/* --------------------------- 定义变量与引入插件 -------------------------- */


// 轮播图
function slideshowFunt() {
  let SlideShowBox = main.querySelector("#functionalAreaMiddleSlideShow").querySelector(".AreaMiddleSlideShow");
  let left = main.querySelector(".AreaMiddleLeftArrow");
  let right = main.querySelector(".AreaMiddleRightArrow");
  let AreaMiddleDot = main.querySelector(".AreaMiddleDot").querySelectorAll("li");

  // 时间  图片宽度  轮播图滚轮盒子  左箭头  右箭头  小圆点
  slideshow(10, -600, SlideShowBox, left, right, AreaMiddleDot);
  
}
// 生成html(文章)
function generateHTML() {  
  var functionalAreaMiddle = main.querySelector("#functionalAreaMiddle");  
  // console.log(datas);
  // 最外层
  var aDOM = document.createElement("a");
  aDOM.className = "MiddleProjection";  
  // datas.namev
  // console.log(JSON.stringify(datas))
  aDOM.href = "./dist/article.html?article_text="+encodeURI(datas.namev); //+encodeURI()
  aDOM.namev = datas.namev;
  // 图片
  var div1DOM = document.createElement("div");
  div1DOM.className = "ProjectionLeft"; 
  var imgDOM = document.createElement("img");
  imgDOM.className = "ProjectionImg";
  imgDOM.src = datas.imgDOM_src;
  imgDOM.alt = "标题图片";  
  div1DOM.appendChild(imgDOM);
  // 文字
  var div2DOM = document.createElement("div");
  div2DOM.className = "ProjectionRight";
  var h2sDOM = document.createElement("h2");
  h2sDOM.className = "ProjectionH4";
  h2sDOM.innerHTML = datas.h2sDOM_text;
  div2DOM.appendChild(h2sDOM);
  var p1DOM = document.createElement("p");
  p1DOM.className = "ProjectionP";
  p1DOM.innerHTML = datas.p1DOM_text;
  div2DOM.appendChild(p1DOM);

  // 功能
  var div3DOM = document.createElement("div");
  div3DOM.className = "multi-function";  
  var spanDOM = Array(3);
  var spansDOM = Array(3);
  var fontico = ["&#xec7f;", "&#xe616;", "&#xe6a1;"];
  var dataSpansDOM = ["spansDOM_Thumb_up", "spansDOM_browse", "spansDOM_speak"];
  for(let i = 0; i < spanDOM.length; i++) {
    spanDOM[i] = document.createElement("span"); 
    spanDOM[i].className = "iconfont-main";
    spanDOM[i].innerHTML = fontico[i]; 
    
    spansDOM[i] = document.createElement("span");
    spansDOM[i].innerHTML = datas[dataSpansDOM[i]];

    spanDOM[i].appendChild(spansDOM[i]);
    div3DOM.appendChild(spanDOM[i]);
  }
  
  // 功能(类别)
  var spanSategoriesDOM = document.createElement("span");
  spanSategoriesDOM.innerHTML = datas.spansDOM_categories;
  div3DOM.appendChild(spanSategoriesDOM);
  div2DOM.appendChild(div3DOM);


  // 添加
  aDOM.appendChild(div1DOM);
  aDOM.appendChild(div2DOM);
  functionalAreaMiddle.appendChild(aDOM);

}
// 网络请求与数据赋值(文章)
function networkRequest(value) {
  // console.log(value)
/* ----------------------------- 赋值 ---------------------------- */ 
  let arrServer = [];
  let arrLocal = [];
  let i = 0;
  // 存储所有对象中的属性
  for (const key in value.articlesData) {
    arrServer[i++] = key;
  }
  i = 0;  
  for(const key in datas) {
    arrLocal[i++] = key;
  }  
  // 赋值本地数据
  for(let j = 0; j < i; j++) {        
    if(value.articlesData[arrServer[j]] instanceof Array) {
      datas[arrLocal[j]] = value.articlesData[arrServer[j]].length;
    }else {
      datas[arrLocal[j]] = value.articlesData[arrServer[j]];        
    }
  }

  // 生成html
  generateHTML();
/* ----------------------------- 赋值 ---------------------------- */

/* ----------------------------- 单击发送ajax ---------------------------- */
  var MiddleProjection = main.querySelector("#functionalAreaMiddle").querySelectorAll(".MiddleProjection");
  // 规定的文章次数与点赞的数量
  for(let i = 0; i < MiddleProjection.length; i++) {
    // 绑定点击事件(监听被点击事件)
    MiddleProjection[i].addEventListener("click", function() {    
      // for (const key in value.articlesData) {
        // 找寻被相匹配文章
        if(value.articlesData.namev === this.namev) {
          // 叠加
          value.articlesData["browse"] = (value.articlesData["browse"] - 0) + 1;
          // 发送数据
          funt("post", URL, fun, `spansDOM_browse=${value.articlesData["browse"]}&namev=${value.articlesData["namev"]}`);
          // 接受数据包，将数据包中指定数据赋值给DOM元素中
          function fun(values) {
            MiddleProjection[i].querySelector(".ProjectionRight").querySelectorAll("span")
            [3].innerHTML = values.articlesData["browse"];
          }
        }

      // }            
    }, false);
  }
/* ----------------------------- 单击发送ajax ---------------------------- */
}
// 到达底部后更新数据
function bottomUpdateData() {
  var i = 0;

  //滚动条在Y轴上的滚动距离
  function getScrollTop() {
    var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
    if(document.body){
      bodyScrollTop = document.body.scrollTop;
    }
    if(document.documentElement){
      documentScrollTop = document.documentElement.scrollTop;
    }
    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
    return scrollTop;
  }     
  //文档的总高度     
  function getScrollHeight() {
    var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
    if(document.body){
      bodyScrollHeight = document.body.scrollHeight;
    }
    if(document.documentElement){
      documentScrollHeight = document.documentElement.scrollHeight;
    }
    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
    
    return scrollHeight;
  }     
  //浏览器视口的高度
  function getWindowHeight() {
    var windowHeight = 0;
    if(document.compatMode == "CSS1Compat"){
      windowHeight = document.documentElement.clientHeight;
    }else{
      windowHeight = document.body.clientHeight;
    }
    return windowHeight;
  }
 
  // 监听滚动条
  window.onscroll = function() { 
    // 头部文件
    headRolling(window.pageYOffset);

    // 判断数据是否全部加载(全部加载将终端服务器请求)
    if(n < serialNumber.length) {
      // 滚动条到底部自动加载数据        
      if(Math.floor(getScrollTop()+getWindowHeight()) === Math.floor(getScrollHeight())) {                  
        // 表示作为加载数据的缓冲(更加流畅)
        if(i++) {
          funt("post", URL, networkRequest, `ggb=${serialNumber[n++]}`);
          i = 0;        
        }      
      }    
    }
  };
}
// 更新同类别文章
function categoryClassified() {  
/* --------------------------- 数据定义与赋值 --------------------------- */
  var head = document.querySelector("header");    
  var spans = head.querySelector("#HeadMain").querySelector(".HeadMainBox").querySelectorAll("span");
  
  var functionalAreaMiddle = main.querySelector("#functionalAreaMiddle"); 
  var a_s = functionalAreaMiddle.getElementsByTagName("a");
/* --------------------------- 数据定义与赋值 --------------------------- */

/* --------------------------- 点击更换文章 --------------------------- */
  for(let i = 0; i < spans.length-1; i++) {
    spans[i].onclick = function() {      
      // 删除原来的文章
      for(let i = a_s.length - 1; i >= 0; i--) {        
        functionalAreaMiddle.removeChild(a_s[i]);
      }
      // 判断类别与展示类别
      if(this.innerHTML === "小学作文") {                
        initiation("小学作文");
      }else if(this.innerHTML === "中学作文") {
        initiation("中学作文");
      }else if(this.innerHTML === "高中议论文") {
        initiation("高中议论文");
      }else if(this.innerHTML === "大学论文") {
        initiation("大学论文");
      }else if(this.innerHTML === "HTML") {
        initiation("HTML");
      }else if(this.innerHTML === "CSS") {
        initiation("CSS");
      }else if(this.innerHTML === "JavaScript") {
        initiation("JavaScript");
      }else if(this.innerHTML === "ajax") {
        initiation("ajax");
      }else if(this.innerHTML === "Vue.js") {
        initiation("Vue.js");
      }else if(this.innerHTML === "node.js") {
        initiation("node.js");
      }else if(this.innerHTML === "webpack") {
        initiation("webpack");
      }else if(this.innerHTML === "c") {
        initiation("c");
      }
    };
  }
/* --------------------------- 点击更换文章 --------------------------- */
  
}
// 开始-统计所有数据-文章生成
function initiation(categories) {
  // 获取所有文章数量
  funt("post", URLs, fun, `categories=${categories}`);        
  function fun(value) {      
    serialNumber = value;

    // 数据赋值生成文章 
    for(n = 0; n < 3; n++) {       
      funt("post", URL, networkRequest, `ggb=${serialNumber[n]}`);  
    }
  }

}

// 调用轮播图
slideshowFunt();

// 开始-统计所有数据-到达底部后更新数据
// funt("get", "http://localhost:3000/initialization", funArticlesData, undefined);
// function funArticlesData(value) {
  // console.log(value);  
initiation("默认");  
  
// }

// 到达底部后更新数据
bottomUpdateData()
// 更新同类别文章
categoryClassified()
